<template>
  <el-card v-if="visible">
    <div slot="header">
      <div class="mb-4">
        <el-button type="danger" @click="handleBack">返回</el-button>
      </div>
      <div>
        <el-input
          style="width:200px"
          class="mr-4"
          clearable
          placeholder="请输入用户编号"
          v-model="listQuery.user_code"
        ></el-input>
        <el-input
          style="width:200px"
          class="mr-4"
          clearable
          placeholder="请输入用户昵称"
          v-model="listQuery.nickname"
        ></el-input>
        <!-- <el-input
          style="width:200px"
          class="mr-4"
          clearable
          placeholder="请输入房间名称"
          v-model="listQuery.room_name"
        ></el-input> -->
        <el-date-picker
          class="mr-5"
          clearable
          v-model="date_value1"
          type="datetimerange"
          range-separator="-"
          start-placeholder="抢红包开始时间"
          end-placeholder="抢红包结束时间"
          value-format="timestamp"
          @change="handleChangeDate1"
        >
        </el-date-picker>
        <el-button type="primary" @click="deBounceWrap(handleSearch)"
          >搜索</el-button
        >
        <el-button type="primary" @click="deBounceWrap(handleReset)">
          重置
        </el-button>
      </div>
    </div>
    <el-table :data="menuList" border>
      <el-table-column prop="id" width="80" label="ID"> </el-table-column>
      <el-table-column prop="" label="用户编号">
        <template slot-scope="{ row }">
          <p v-if="row.user_data">{{ row.user_data.user_code }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="" label="昵称">
        <template slot-scope="{ row }">
          <p v-if="row.user_data">{{ row.user_data.nickname }}</p>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="" label="房间编号">
        <template slot-scope="{ row }">
          <p v-if="row.user_room">{{ row.user_room.id }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="" label="房间名称">
        <template slot-scope="{ row }">
          <p v-if="row.user_room">{{ row.user_room.room_name }}</p>
        </template>
      </el-table-column> -->
      <el-table-column prop="money" label="抢到金币"> </el-table-column>
      <el-table-column prop="hits" label="点击次数"> </el-table-column>
      <el-table-column prop="create_time" label="抢红包时间"> </el-table-column>
    </el-table>
    <cus-pagination
      :total="total"
      :page.sync="meta.page"
      :limit.sync="meta.page_size"
      @pagination="handleGetDetail"
    />
  </el-card>
</template>

<script>
import { detailData } from "@//api/redEnvelope/redEnvelopeRecord";

export default {
  name: "detail",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    }
  },
  data() {
    return {
      total: 0,
      meta: { page: 1, page_size: 20 },
      date_value1: null,
      listQuery: {
        user_code: undefined,
        nickname: undefined,
        room_id: undefined,
        game_id: undefined,
        start_time: undefined,
        end_time: undefined
      },
      menuList: []
    };
  },
  watch: {
    id: function(newValue, oldValue) {
      this.listQuery.game_id = newValue ? newValue : oldValue;

      this.handleGetDetail();
    }
  },
  // mounted() {
  //   this.handleGetDetail();
  // },

  methods: {
    async handleGetDetail() {
      const detail = await detailData(this.meta, this.listQuery);
      if (detail.code === 200) {
        this.menuList = detail.data.list;
        this.total = detail.data.total;
      }
    },
    handleSearch() {
      this.meta.page = 1;
      this.handleGetDetail();
    },
    handleReset() {
      this.date_value1 = null;
      this.meta = {
        page: 1,
        page_size: 20
      };
      for (let key in this.listQuery) {
        if (key !== "game_id") {
          this.listQuery[key] = undefined;
        }
      }
      this.handleGetDetail();
    },
    handleBack() {
      this.$emit("update:visible", false);
    },
    /**自定义时间 */
    handleChangeDate1(value) {
      if (value) {
        this.listQuery.start_time = value[0] / 1000;
        this.listQuery.end_time = value[1] / 1000;
      } else {
        this.listQuery.start_time = undefined;
        this.listQuery.end_time = undefined;
      }
    }
  }
};
</script>
<style lang="scss" scoped></style>
